import { ref } from 'vue'

export default function useDraw() {
  // * 指向最外层容器
  const appRef = ref()
  // * 定时函数
  const timer = ref(0)
  // * 默认缩放值
  const scale = {
    width: '1',
    height: '1',
  }
  // * 设计稿尺寸（px）
  const baseWidth = 1920
  const baseHeight = 1080

  /* 
  该`calcRate`函数的主要目的是动态调整一个元素（由`appRef`引用）的大小和位置，以适应不同设备或窗口尺寸下的显示效果，同时保持元素内容的宽高比不变。以下是详细的步骤说明：

  1. **初始化基准宽高比**:
    - 计算`baseProportion`，这是基于`baseWidth`和`baseHeight`的初始宽高比，用以确定元素设计时的理想宽高比。

  2. **获取当前窗口宽高比**:
    - 使用`window.innerWidth`和`window.innerHeight`获取当前浏览器窗口的宽度和高度，然后计算当前的宽高比`currentRate`。

  3. **比较宽高比并调整元素大小**:
    - 比较`currentRate`与`baseProportion`：
      - 如果`currentRate`大于`baseProportion`，这意味着当前窗口比预期的更宽，需要保持元素的高度不变，而宽度需要根据比例进行缩放。
        - 计算新的宽度比例`scale.width`和高度比例`scale.height`。
        - 设置`appRef.value.style.transform`属性，应用`scale`变换和中心点平移，确保元素在屏幕中心且宽度按比例缩放。
      - 否则，当前窗口比预期的更高，需要保持元素的宽度不变，而高度需要根据比例进行缩放。
        - 同样计算新的宽度比例`scale.width`和高度比例`scale.height`。
        - 设置`appRef.value.style.transform`属性，应用`scale`变换和中心点平移，确保元素在屏幕中心且高度按比例缩放。

  4. **应用变换**:
    - 通过`transform: scale()`和`translate(-50%, -50%)`，元素被缩放至合适的大小，并定位到屏幕中心，确保无论窗口如何变化，元素都能保持其原始的宽高比和视觉效果。

  总结来说，`calcRate`函数通过动态调整元素的`transform`属性，确保了元素在各种设备和窗口尺寸下均能保持一致的视觉比例，同时始终居中显示。 
  */

  // * 需保持的比例（默认1.77778）
  const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
  const calcRate = () => {
    // 当前宽高比
    const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
    if (appRef.value) {
      if (currentRate > baseProportion) {
        // 表示更宽
        scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
        scale.height = (window.innerHeight / baseHeight).toFixed(5)
        appRef.value.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
      } else {
        // 表示更高
        scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
        scale.width = (window.innerWidth / baseWidth).toFixed(5)
        appRef.value.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
      }
    }
  }

  const resize = () => {
    clearTimeout(timer.value)
    timer.value = window.setTimeout(() => {
      calcRate()
    }, 200)
  }

  // 改变窗口大小重新绘制
  const windowDraw = () => {
    window.addEventListener('resize', resize)
  }

  // 改变窗口大小重新绘制
  const unWindowDraw = () => {
    window.removeEventListener('resize', resize)
  }

  return {
    appRef,
    calcRate,
    windowDraw,
    unWindowDraw
  }
}
